import QtQuick 2.15
import UIModule 1.0
import "../common" as Com
Item {
    id:root
    width: baseWith*2+spac
    height: width*2
    property int baseWith: 50
    property int spac: 20
    property bool leftBall: false
    signal hided()
    BallItem {
        id:ballItem1
        aX0:ballItem.x
        aY0:ballItem.y
        aX1: root.leftBall ? ballItem.x + (ballItem.width + root.spac) * 0.5 : ballItem.x - (ballItem.width + root.spac) * 0.5
        aY1: ballItem.y - (ballItem.width + root.spac) * 0.87
        width: root.baseWith
        height: width
        text:UI.timeFormat === UI.H12?"H12":"H24"
        onClicked: UI.timeFormat === UI.H12?UI.timeFormat=UI.H24:UI.timeFormat=UI.H12
        onHided:{
            root.visible = false
        }

    }
    BallItem {
        id:ballItem2
        aX0:ballItem.x
        aY0:ballItem.y
        aX1: root.leftBall ? ballItem.x + (ballItem.width + root.spac) :  ballItem.x -( ballItem.width + root.spac)
        aY1: ballItem.y
        width: root.baseWith
        text: "S"
        en:UI.hideSecondEn?true:false
        onClicked: UI.hideSecondEn=!UI.hideSecondEn

    }
    BallItem {
        id:ballItem3
        aX0:ballItem.x
        aY0:ballItem.y
        aX1: root.leftBall ? ballItem.x + (ballItem.width + root.spac) * 0.5 : ballItem.x - (ballItem.width + root.spac) * 0.5
        aY1:  ballItem.y + (ballItem.width + root.spac) * 0.87
        width: root.baseWith
        text:(new Date).getHours()<12?"AM":"PM"
        en:UI.showAPMEn?true:false
        onClicked: UI.showAPMEn=!UI.showAPMEn

    }
    Rectangle {
        id: ballItem
        x: root.leftBall?0:parent.width-width
        anchors.verticalCenter: parent.verticalCenter
        width:  root.baseWith
        height: width
        radius: width / 2
        color: "#33FFFFFF"
        Rectangle {
            id: centerBgItem
            anchors.centerIn: parent
            width:  root.baseWith * 0.8
            height: width
            radius: width / 2
            color: "#55FFFFFF"
            Rectangle {
                id: centerItem
                anchors.centerIn: parent
                width:  root.baseWith * 0.6
                height: width
                radius: width / 2
                color: "#AAFFFFFF"
            }
        }
        Com.XMouseArea{
            anchors.fill: parent
             onClicked:{
               root.hided()
             }
        }
    }
    onVisibleChanged: {
        if(visible){
            ballItem1.show.start()
            ballItem2.show.start()
            ballItem3.show.start()
        }
    }
    onHided: {
        ballItem1.hide.start()
        ballItem2.hide.start()
        ballItem3.hide.start()
    }
}
